<template>
  <!-- 营家好店 -->
  <div class="goodshop">
    <div class="title">
      <span>{{ data.name }}</span>
      <span
        class="lookmore"
        @click="toList"
      >查看更多</span>
    </div>




    <!-- 当有四个店铺时 -->
    <div class="shop-boxs">
      <!--第一块-->
      <div
        v-for=" (l,index) in list"
        v-if="index<2"
        :key="l.id"
        class="goods-list"
        :style="{backgroundImage:'url('+l.detail.cAdvImageUrl+')'}"
      >
        <div class="goods-list-itme shop-box">
          <div class="logo">
            <img
              :src="l.detail.cLogoUrl"
              :alt="l.detail.cShopShowName"
              class="logo-img"
            >
          </div>
          <div class="shop-name">
            {{ l.detail.cShopShowName }}
          </div>
          <div class="shop-option">
            <div
              v-if="l.detail.iType != 'undefined'"
              class="shop-type"
            >
              <img
                src="../../assets/newPage/retail@2x.png"
                alt=""
              >
              {{ l.detail.iType === 1 ? "自营" : "非自营" }}
            </div>
            <div class="shop-status">
              <!-- {{ l.detail.bCorpStore }}人已关注 -->
              <img
                src="../../assets/newPage/guanzhu@2x.png"
                alt=""
              >
              {{ l.watchNum }}人已关注
            </div>
          </div>

          <div
            class="shop-button"
            @click="GotoShop(l.detail)"
          >
            进入店铺
          </div>
        </div>

        <div class="shop-goods">
          <el-carousel
            height="35rem"
            indicator-position="outside"
          >
            <el-carousel-item
              v-for="items in l.count"
              :key="items"
            >
              <div class="carousel-item">
                <div
                  v-for="(item, str) in l.goods.data"
                  v-if="str >= (items - 1) * 3 && str < items * 3&&str>=0&&(str%3==0||str == 0)"
                  class="left"
                  @click="toBuy(item)"
                >
                  <div class="img-box">
                    <img :src="item.defaultAlbum">
                  </div>

                  <div class="goods-title">
                    {{ item.cProductShowName }}
                  </div>
                  <div class="goods-desc">
                    {{ item.cSellingPoint }}
                  </div>
                  <div class="goods-price">
                    <span class="new">¥{{ item.fSalePrice }}</span>
                    <span class="old">¥{{ item.pfMarkPrice }}</span>
                  </div>
                </div>
                <div class="right">
                  <div
                    v-for="(item, str) in l.goods.data"
                    v-if="str >= (items - 1) * 3 && str < items * 3&&str>0&&str%3==1"
                    class="t"
                    @click="toBuy(item)"
                  >
                    <div class="t-left">
                      <div class="name">
                        {{ item.cProductShowName }}
                      </div>
                      <div class="price">
                        ¥{{ item.fSalePrice }}
                      </div>
                    </div>
                    <img :src="item.defaultAlbum">
                  </div>
                  <div
                    v-for="(item, str) in l.goods.data"
                    v-if="str >= (items - 1) * 3 && str < items * 3&&str>0&&str%3==2"
                    class="b"
                    @click="toBuy(item)"
                  >
                    <div class="t-left">
                      <div class="name">
                        {{ item.cProductShowName }}
                      </div>
                      <div class="price">
                        ¥{{ item.fSalePrice }}
                      </div>
                    </div>
                    <img :src="item.defaultAlbum">
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!--第一块END-->
    </div>
    <!-- 当有四个店铺时END -->
    <!-- <div class="more">
			<img src="../../assets/img/logo2.png" alt="" @click="toList">
		</div> -->
    <!-- u鲜广告 -->
    <!-- <img src="../../assets/img/7@2x.png" alt="" class="adv"> -->
  </div>
</template>

<script>
	import bus from "@/api/eventBus";
	export default {
		name: "",
		components: {},
		props: {
			data: {
				type: Object,
				// 对象或数组默认值必须从一个工厂函数获取
				default: function() {
					return {};
				},
			},
		},
		data() {
			return {
				list: [],
				ShopLienth: "",
				SHOPOBJDATA: {},
				loading: true,
				totalCount: "",
			};
		},
		computed: {},
		mounted() {
			this.GetData();
			// this.GetShopFavoritesData()
		},
		methods: {
			FocusNum(id) {
				console.log("FocusNum计算", id);
				// this.GetShopFavoritesData(id)
				return this.GetShopFavoritesData(id);
			},
			GetData() {
				let params = {
					shop_ids: this.data.connect_id,
				};
				this.$api.commit.IndexShops(params).then((res) => {
					console.log("获取营家好店列表", res.data);
					this.list = res.data;
					this.ShopLienth = res.data.length;
					this.loading = false;
					this.list.forEach((item) => {
						this.GetShopFavoritesData(item.shop_id);
						if (item.goods.data.length >= 1) {
							this.$set(item, 'count', Math.ceil((item.goods.data.length - 1) / 3))
						} else {
							this.$set(item, 'count', 1)
						}

					});


				});
			},
			toBuy(item) {
				this.$router.push({
					path: "/fruit/detail?id=" + item.pid + '&iShopId=' + item.iShopId
				});
			},
			// 更多
			toList() {
				this.$router.push({
					path: "/shopclass",
				});
			},
			// 进店
			GotoShop(GotoShop) {
				console.log("进店", GotoShop);
				bus.$emit("GotoShopOBJData", GotoShop);
				localStorage.setItem("refresh", true);
				this.$router.push({
					path: "/shopindex?id=" + GotoShop.id,
				});
				sessionStorage.setItem("ShopID", GotoShop.id)
				sessionStorage.setItem("ShopActiveIndex", '')
			},
			// 关注人数
			GetShopFavoritesData(iShopId) {
				let params = {
					token: localStorage.getItem("token"),
					id: iShopId,
				};
				this.$api.commit.getFavoriteCount(params).then((res) => {
					console.log("关注人数res", res);
					if (res.code === 200) {
						// console.log('this.关注人数', res.data.pager.totalCount)
						this.totalCount = res.data;
						this.list.forEach((item) => {
							if (iShopId == item.shop_id) {
								this.$set(item, "watchNum", res.data);
							}
						});
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.goodshop {
		background: #fff;
		padding: 9.19rem 10rem;
		display: flex;
		flex-direction: column;

		.title {
			width: 100%;
			height: 3.44rem;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			font-size: 3rem;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #333333;
			margin-bottom: 3.94rem;

			.lookmore {
				font-size: 1.13rem;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #999999;
				cursor: pointer;
			}
		}

		.shop-boxs {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.goods-list {
			// margin-top: 1.88rem;
			width: 49%;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			justify-content: flex-start;
			align-items: center;
			min-height: 61.88rem;
			background-repeat: no-repeat;
			background-size: cover;

			.margin-left-style {
				margin-left: 1.2rem !important;
			}

			.goods-list-itme {
				width: 100%;
				margin-left: 1.2rem;
				height: 28rem;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				cursor: pointer;
				position: relative;

				.goods-box {
					background: white;
				}

				.goods-img {
					width: 15rem;
					height: 15rem;
					margin: 0 auto;
					text-align: center;
				}

				.name {
					font-size: 1.13rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #040000;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 15rem;
					margin-top: 0.94rem;
					text-align: center;
					// line-height: 1.5;
				}

				.price {
					font-size: 1.5rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #f3406f;
					margin-top: 0.94rem;
					width: 15rem;
					text-align: center;
				}
			}

			.goods-list-itme:not(:last-of-type) {
				margin-left: 0;
			}

			.shop-box {
				// background: #00dea9;
				// flex-direction: column;
				color: white;
				font-weight: 400;

				.logo-img {
					width: 2.63rem;
					height: 2.75rem;
					position: absolute;
					left: 6.56rem;
					top: 7.56rem;
				}

				.shop-name {
					font-size: 3.63rem;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: #000000;
					padding: 1.63rem 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 16.5rem;
					position: absolute;
					border-bottom: 0.1rem solid #000;
					top: 10.2rem;
					left: 6.56rem;
				}

				.shop-option {
					position: absolute;
					left: 6.56rem;
					top: 18.63rem;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					img {
						width: 1.5rem;
						height: 1.25rem;
						margin-right: 0.69rem;
						object-fit: contain;
					}
				}

				.shop-type {
					font-size: 1.25rem;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #000000;
					margin-right: 2.06rem;

					img {
						width: 1.5rem;
						height: 1.25rem;
					}
				}

				.shop-status {
					font-size: 1.25rem;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #000000;

					img {
						width: 1.5rem;
						height: 1.25rem;
					}
				}

				.shop-button {
					width: 11.25rem;
					height: 3.13rem;
					background: #1BE0BA;
					box-shadow: 0rem 1rem 2rem 0rem rgba(27, 224, 186, 0.3);
					border-radius: 2rem;
					font-size: 1.25rem;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					left: 6.56rem;
					top: 23.19rem;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.shop-goods {
				flex: 1;
				width: 100%;
				margin-bottom: 4rem;

				.carousel-item {
					// width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding: 4.5rem 2.5rem 4.5rem;

					.left {
						// padding: 1.25rem;
						cursor: pointer;
						display: flex;
						flex-direction: column;
						align-items: center;
						background: #fff;
						width: 49%;
						height: 29.5rem;

						.img-box {
							// width: 100%;
							height: 16.63rem;
							margin-bottom: 1.88rem;
							padding: 1.25rem;
						}

						img {
							width: 100%;
							height: 100%;
						}

						.goods-title {
							font-size: 1.25rem;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #000000;
							// line-height: 1.5;
							width: 90%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin: 0 auto;
							// padding: 0 1.25rem;
						}

						.goods-desc {
							font-size: 1rem;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #000000;
							opacity: 0.4;
							margin-top: 1.13rem;
							margin-bottom: 1.6rem;
						}

						.goods-price {
							display: flex;
							justify-content: center;
							align-items: center;
							margin-bottom: 2rem;

							.new {
								font-size: 1.25rem;
								font-family: SourceHanSansCN;
								font-weight: 400;
								color: #FF0000;
								margin-right: 0.94rem;
							}

							.old {
								font-size: 1.25rem;
								font-family: SourceHanSansCN;
								font-weight: 400;
								text-decoration: line-through;
								color: #000000;
								opacity: 0.4;
							}

						}
					}

					.right {
						width: 49%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 29.5rem;

						// padding: 1.25rem;
						.t {
							background: #fff;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 1.25rem;
							height: 40%;
							cursor: pointer;

							.t-left {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								align-items: center;
								width: 50%;

								.name {
									align-items: center;
									// overflow: hidden;
									// text-overflow: ellipsis;
									// white-space: nowrap;
									font-size: 1.25rem;
									font-family: SourceHanSansCN;
									font-weight: 400;
									color: #000000;
									line-height: 1.5;
									margin-bottom: 2rem;
									overflow: hidden;
									text-overflow: ellipsis;
									display:-webkit-box; 
									 -webkit-line-clamp: 2;
									 -webkit-box-orient: vertical;
								}

								.price {
									font-size: 1.25rem;
									font-family: SourceHanSansCN;
									font-weight: 400;
									color: #FF0000;
								}

							}

							img {
								width: 8.5rem;
								height: 9.63rem;
							}
						}

						.b {
							background: #fff;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 1.25rem;
							cursor: pointer;
							height: 40%;
							.t-left {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								align-items: center;
								width: 50%;

								.name {
									align-items: center;
									// overflow: hidden;
									// text-overflow: ellipsis;
									// white-space: nowrap;
									font-size: 1.25rem;
									font-family: SourceHanSansCN;
									font-weight: 400;
									color: #000000;
									line-height: 1.5;
									margin-bottom: 2rem;
									overflow: hidden;
									text-overflow: ellipsis;
									display:-webkit-box;
									  -webkit-line-clamp: 2;
									   -webkit-box-orient: vertical;
								}

								.price {
									font-size: 1.25rem;
									font-family: SourceHanSansCN;
									font-weight: 400;
									color: #FF0000;
								}

							}

							img {
								width: 8.5rem;
								height: 9.63rem;
							}
						}
					}
				}

			}
		}

		.more {
			height: 2.5rem;
			background: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 1.44rem;
			margin-top: 1.88rem;

			img {
				width: 7.38rem;
				cursor: pointer;
			}
		}

		.adv {
			width: 100%;
			margin-top: 3.69rem;
			object-fit: contain;
		}
	}
</style>
<style type="text/css" lang="scss">
	.el-carousel__indicator--horizontal {
		width: 0.55rem;
		height: 0.55rem;
		background: #000;
		opacity: 0.2;
		border-radius: 50%;
		padding: 0 !important;
		opacity: 0.5;
		margin-right: 1rem;

		.el-carousel__button {
			width: 0.55rem;
			height: 0.55rem;
			background: #000;
			border-radius: 50%;
			opacity: 0.5;
		}

	}

	.is-active {
		opacity: 1;

		.el-carousel__button {
			width: 0.55rem;
			height: 0.55rem;
			background: #1BE0BA;
			border-radius: 50%;
			opacity: 1;
		}
	}
</style>
